<template>
  <div class="add-work">
    <h2 class="text-2xl font-bold mb-6 text-center">添加作品</h2>
    <el-form :model="workForm" :rules="rules" ref="workFormRef" @submit.native.prevent="handleSubmit">
      <el-form-item label="作品标题" prop="name">
        <el-input v-model="workForm.name" placeholder="请输入作品标题"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="authorName">
        <el-input v-model="workForm.authorName" placeholder="请输入作者"></el-input>
      </el-form-item>
      <el-form-item label="作品描述" prop="synopsis">
        <el-input type="textarea" v-model="workForm.synopsis" placeholder="请输入作品描述"></el-input>
      </el-form-item>
      <el-form-item label="封面图片链接" prop="workPicture">
        <el-input v-model="workForm.workPicture" placeholder="请输入封面图片链接"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" class="w-full custom-button">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      workForm: {
        name: '',
        synopsis: '',
        workPicture: '',
        authorName: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入作品标题', trigger: 'blur' }
        ],
        authorName: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        synopsis: [
          { required: true, message: '请输入作品描述', trigger: 'blur' }
        ],
        workPicture: [
          { required: true, message: '请输入封面图片链接', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.workFormRef.validate((valid) => {
        if (valid) {
          this.$http.post('/work', this.workForm)
            .then(response => {
              if (response.data) {
                this.$message.success('作品添加成功');
                // 添加跳转逻辑
                this.$router.push({ name: 'home' });
              } else {
                this.$message.error('添加失败，请重试');
              }
            })
            .catch(error => {
              this.$message.error('添加失败，请稍后重试');
              console.error('添加作品请求出错:', error);
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.add-work {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.el-form-item {
  margin-bottom: 20px;
}

.custom-button {
  background: #2a5298;
  border-color: #2a5298;
  color: #ffffff;
  transition: background 0.3s ease, transform 0.2s ease;
}

.custom-button:hover {
  background: #1e3c72;
  border-color: #1e3c72;
  transform: scale(1.05);
}
</style>